/* Start:/local/templates/KOJRO - HOME/styles.css?177206143351991*/
/* ==================================== */
/* 🍏 Основные стили */
/* ==================================== */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden; 
}

/* 📦 Общий контейнер для центрирования и ограничения ширины контента */
/* Теперь с префиксом: .kojro-container */
.kojro-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Стили для изображений, чтобы они не выходили за пределы своих блоков */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==================================== */
/* 🤩 Стили для Header */
/* ==================================== */
header {
    position: relative;
    background: linear-gradient(to bottom, rgba(120, 120, 120, 0.8), rgba(51, 51, 51, 0.8));
    color: #fff;
    padding: 0px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid #444;
}

header nav {
    margin-top: 10px;
}

header nav a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
    white-space: nowrap;
}

/* ==================================== */
/* 📝 Стили для Main (основного контента) */
/* ==================================== */
main {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* 📚 Секции для основного текстового контента (твоя "центральная колонка") */
/* Теперь с префиксом: .kojro-content-text-wrapper */
.kojro-content-text-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;

    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
    color: #333;
}

/* 🏞️ Секции, которые должны растягиваться на всю ширину экрана */
/* Теперь с префиксом: .kojro-full-width-section */
.kojro-full-width-section {
    width: 100%;
    padding: 60px 0;
    margin: 40px 0;
    box-sizing: border-box;
}

/* Пример фона для полноширинной секции */
/* Теперь с префиксом: .kojro-full-width-section.kojro-bg-gradient */
.kojro-full-width-section.kojro-bg-gradient {
    background: linear-gradient(to right, #6dd5ed, #2193b0);
}

/* 📦 Внутренний контейнер для ограничения ширины контента внутри полноширинных секций */
/* Теперь с префиксом: .kojro-inner-content-container */
.kojro-inner-content-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 💻 Десктопные стили (применимы для экранов от 768px и больше) */
@media (min-width: 768px) {
    /* Медиазапросы для .kojro-content-text-wrapper здесь не нужны,
       так как max-width: 900px уже обеспечивает нужную ширину на десктопах */
}
/* ==================================== */
/* 🦶 Стили для Footer */
/* ==================================== */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}
figure {
  max-width: 100%; /* Чтобы <figure> не выходил за границы родительского элемента */
  margin: 0; /* Убираем стандартные отступы у <figure> */
}

figure img {
  max-width: 100%; /* Изображение не должно быть шире <figure> */
  height: auto;    /* Сохраняем пропорции изображения */
  display: block;  /* Убираем нежелательные отступы под изображением */
}

figcaption {
  font-size: 0.9em;
  color: #666;
  margin-top: 0.5em;
  text-align: center;
}
/* Стили разработанные kojro для kojro-image-block */
:root {
    --kojro-border-radius-sm: 5px; 
    --kojro-caption-color: #212529; /* Сделали шрифт подписи темнее */
    --kojro-caption-font-size: 0.9em;
    --kojro-caption-padding: 10px;
    --kojro-block-margin-bottom: 2rem;
    --kojro-block-max-width: 100%;
    --kojro-transition-speed: 0.3s; 
    --kojro-image-scale-factor: 1.05;
    --kojro-shadow-color-light: rgba(0,0,0,0.1); /* Легкая тень */
    --kojro-shadow-hover-color-light: rgba(0,0,0,0.2); /* Тень при наведении */
    --kojro-shadow-color-dark: rgba(0,0,0,0.3); /* Тень для темной темы */
    --kojro-shadow-hover-color-dark: rgba(0,0,0,0.4); /* Тень для темной темы при наведении */
    --kojro-caption-padding-horizontal: 15px; /* Новый параметр для горизонтального отступа подписи */
}

/* 
 * Стили для обертки-ссылки (kojro-image-block-link).
 * Если вы РАСКОММЕНТИРУЕТЕ тег <a> в HTML, 
 * перенесите margin и max-width сюда, как было раньше.
 */
/*
.kojro-image-block-link {
    display: block; 
    text-decoration: none;
    color: inherit;
    margin: 0 0 var(--kojro-block-margin-bottom) 0;
    max-width: var(--kojro-block-max-width);
    /* margin-left: auto; */
    /* margin-right: auto; */
/* }
*/

.kojro-image-block {
    /* Эти стили были в .kojro-image-block-link, но теперь применяются к figure, 
       так как внешней ссылки нет. Если добавите ссылку, перенесите их в .kojro-image-block-link */
    margin: 0 0 var(--kojro-block-margin-bottom) 0;
    max-width: var(--kojro-block-max-width);
    
    /* Остальные стили для .kojro-image-block */
    display: block; /* Убедимся, что figure ведет себя как блок */
    padding: 0; 
    border-radius: var(--kojro-border-radius-sm); 
    overflow: hidden; 
    position: relative; 
    cursor: pointer; /* Добавлено, если хотите, чтобы был курсор-указатель даже без ссылки */
    box-shadow: 0 4px 8px var(--kojro-shadow-color-light); 
    transition: box-shadow var(--kojro-transition-speed) ease-in-out; 

    /* Если нужно центрировать, раскомментируйте */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* Эффект для всего блока при наведении */
/* Теперь эффект применяется непосредственно к .kojro-image-block */
.kojro-image-block:hover {
    box-shadow: 0 8px 16px var(--kojro-shadow-hover-color-light); 
}
/* Если вернете ссылку, перенесите этот стиль на .kojro-image-block-link:hover .kojro-image-block */

.kojro-image-block__wrapper {
    display: block;
    border-top-left-radius: var(--kojro-border-radius-sm);
    border-top-right-radius: var(--kojro-border-radius-sm);
    overflow: hidden; 
}

.kojro-image-block__image {
    max-width: 100%;
    height: auto; 
    display: block;
    object-fit: cover; 
    transition: transform var(--kojro-transition-speed) ease-in-out; 
}

/* При наведении на родительский блок (.kojro-image-block), масштабируем изображение */
.kojro-image-block:hover .kojro-image-block__image {
    transform: scale(var(--kojro-image-scale-factor)); 
}
/* Если вернете ссылку, перенесите этот стиль на .kojro-image-block-link:hover .kojro-image-block__image */

.kojro-image-block__caption {
    font-style: italic;
    color: var(--kojro-caption-color); 
    font-size: var(--kojro-caption-font-size);
    text-align: center;
    padding: var(--kojro-caption-padding) var(--kojro-caption-padding-horizontal); 
}

/* Адаптация для темной темы */
@media (prefers-color-scheme: dark) {
    :root {
        --kojro-caption-color: #bbbbbb; 
    }
    .kojro-image-block {
        box-shadow: 0 4px 8px var(--kojro-shadow-color-dark);
    }
    /* Теперь эффект при наведении применяется непосредственно к .kojro-image-block */
    .kojro-image-block:hover { 
        box-shadow: 0 8px 16px var(--kojro-shadow-hover-color-dark);
    }
    /* Если вернете ссылку, перенесите этот стиль на .kojro-image-block-link:hover .kojro-image-block */
}
	/* ==================================================================== */
/* === НАЧАЛО: ОСНОВНЫЕ СТИЛИ ВИДЕОПЛЕЕРА ============================ */
/* ==================================================================== */

/*
   .video-player-by-kojro
   --------------------------------------------------------------------
   Главный контейнер, который оборачивает все элементы плеера.
*/
.video-player-by-kojro {
    position: relative;                                /* Устанавливает контекст позиционирования для дочерних элементов (оверлея, заголовка, кнопки). */
    width: 100%;                                       /* Занимает всю доступную ширину родительского элемента. */
    max-width: 800px;                                  /* Ограничивает максимальную ширину, чтобы плеер не был слишком большим на широких экранах. */
    margin: 40px auto;                                 /* Устанавливает отступы 40px сверху/снизу и автоматически центрирует плеер по горизонтали. */
    overflow: hidden;                                  /* Скрывает любые дочерние элементы, выходящие за его границы (важно для скругленных углов). */
    border-radius: 10px;                               /* Закругляет углы контейнера плеера на 10 пикселей. */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);        /* Добавляет мягкую тень для придания объема (смещение по Y 10px, размытие 30px, цвет черный с 10% прозрачностью). */
}

/*
   .video-player-by-kojro video
   --------------------------------------------------------------------
   Стили для самого HTML-тега <video>.
*/
.video-player-by-kojro video {
    width: 100%;                                       /* Растягивает видео на всю ширину контейнера плеера, обеспечивая адаптивность. */
    display: block;                                    /* Убирает небольшой отступ снизу, который браузеры по умолчанию добавляют к inline-элементам. */
}

/*
   .video-player-by-kojro .video-overlay
   --------------------------------------------------------------------
   Полупрозрачный слой поверх видео, на котором находятся кнопка Play и заголовок.
*/
.video-player-by-kojro .video-overlay {
    position: absolute;                                /* Позиционирует оверлей абсолютно относительно родителя (.video-player-by-kojro). */
    top: 0;                                            /* Прижимает оверлей к верхнему краю родителя. */
    left: 0;                                           /* Прижимает оверлей к левому краю родителя. */
    width: 100%;                                       /* Растягивает оверлей на всю ширину родителя. */
    height: 100%;                                      /* Растягивает оверлей на всю высоту родителя. */
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.7) 100%); /* Создает градиент для лучшей читаемости заголовка: от прозрачного сверху до темного снизу. */
    display: flex;                                     /* Включает Flexbox для удобного выравнивания дочерних элементов. */
    justify-content: center;                           /* Центрирует дочерние элементы (кнопку Play) по горизонтали. */
    align-items: center;                               /* Центрирует дочерние элементы (кнопку Play) по вертикали. */
    padding: 20px;                                     /* Добавляет внутренние отступы, чтобы контент не прилипал к краям. */
    box-sizing: border-box;                            /* Гарантирует, что padding не увеличивает общую ширину и высоту элемента. */
    pointer-events: none;                              /* Делает оверлей "прозрачным" для кликов мыши, чтобы можно было нажать на видео под ним. */
    opacity: 1;                                        /* Изначально оверлей полностью видим (непрозрачен). */
    transition: opacity 0.4s ease;                     /* Добавляет плавный переход для свойства opacity в течение 0.4 секунды. */
}

/*
   .video-player-by-kojro .video-title
   --------------------------------------------------------------------
   Стили для заголовка видео.
*/
.video-player-by-kojro .video-title {
    position: absolute;                                /* Позиционирует заголовок абсолютно относительно родителя. */
    bottom: 40px;                                      /* Размещает заголовок на 40px выше нижнего края плеера. */
    left: 50%;                                         /* Сдвигает левый край заголовка к центру родителя. */
    background: rgba(255, 255, 255, 0.15);             /* Полупрозрачный белый фон (15% непрозрачности) для эффекта "стекла". */
    color: #ffffff;                                    /* Устанавливает цвет текста на белый. */
    padding: 12px 20px;                                /* Внутренние отступы: 12px сверху/снизу, 20px слева/справа. */
    border-radius: 8px;                                /* Закругляет углы фона заголовка. */
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);            /* Добавляет тень к тексту для улучшения читаемости на светлом фоне. */
    -webkit-backdrop-filter: blur(10px);               /* Применяет эффект размытия фона за заголовком (для Safari). */
    backdrop-filter: blur(10px);                       /* Стандартное свойство для эффекта размытия фона ("матовое стекло"). */
    border: 1px solid rgba(255, 255, 255, 0.2);        /* Добавляет тонкую светлую рамку для подчеркивания эффекта стекла. */
    transform: translateX(-50%) scale(1);              /* Сдвигает заголовок влево на 50% его СОБСТВЕННОЙ ширины для идеального центрирования и задает начальный масштаб. */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Добавляет плавную анимацию для всех изменяемых свойств. */
    text-align: center;                                /* Выравнивает текст внутри заголовка по центру. */
    max-width: 99%;                                    /* Ограничивает ширину, чтобы заголовок не касался краев плеера и мог переноситься на новую строку. */
}

/*
   .video-player-by-kojro .play-button
   --------------------------------------------------------------------
   Стили для круглой кнопки "Play".
*/
.video-player-by-kojro .play-button {
    width: 70px;                                       /* Устанавливает ширину кнопки. */
    height: 70px;                                      /* Устанавливает высоту кнопки. */
    background: rgba(220, 38, 38, 0.8);                /* Красный полупрозрачный фон (80% непрозрачности). */
    border-radius: 50%;                                /* Делает элемент идеально круглым. */
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.3);      /* Добавляет тень под кнопкой для объема. */
    transform: scale(1);                               /* Устанавливает исходный масштаб кнопки (100%). */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Добавляет плавную анимацию для всех свойств. */
    display: flex;                                     /* Включает Flexbox для центрирования иконки-треугольника. */
    justify-content: center;                           /* Центрирует треугольник по горизонтали. */
    align-items: center;                               /* Центрирует треугольник по вертикали. */
}

/*
   .video-player-by-kojro .play-button::after
   --------------------------------------------------------------------
   Псевдоэлемент, который создает иконку-треугольник внутри кнопки "Play".
*/
.video-player-by-kojro .play-button::after {
    content: '';                                       /* Обязательное свойство для создания псевдоэлемента. */
    display: block;                                    /* Делает псевдоэлемент блочным, чтобы можно было задать размеры. */
    width: 0;                                          /* Ширина самого элемента равна нулю. */
    height: 0;                                         /* Высота самого элемента равна нулю. */
    border-style: solid;                               /* Устанавливает сплошной стиль для границ. */
    border-width: 12px 0 12px 20px;                    /* Создает треугольник: 12px верхняя и нижняя границы, 0 правая, 20px левая. */
    border-color: transparent transparent transparent #ffffff; /* Делает все границы прозрачными, кроме левой (белой), формируя видимый треугольник. */
    margin-left: 5px;                                  /* Небольшой сдвиг вправо для визуального центрирования треугольника в круге. */
}

/*
   :hover состояния для плеера
   --------------------------------------------------------------------
   Стили, которые применяются при наведении курсора на плеер.
*/
.video-player-by-kojro:hover .play-button {
    transform: scale(1.15);                            /* Увеличивает кнопку "Play" на 15% при наведении. */
    background: rgba(239, 68, 68, 0.95);               /* Делает фон кнопки ярче и менее прозрачным. */
}

.video-player-by-kojro:hover .video-title {
    transform: translateX(-50%) scale(1.05) translateY(-10px); /* Увеличивает заголовок на 5% и приподнимает его на 10px. */
    background: rgba(255, 255, 255, 0.25);             /* Делает фон заголовка немного светлее. */
}

/*
   .is-playing состояние
   --------------------------------------------------------------------
   Стиль для оверлея, когда видео воспроизводится (класс добавляется через JS).
*/
.video-player-by-kojro.is-playing .video-overlay {
    opacity: 0;                                        /* Делает оверлей полностью прозрачным (невидимым), когда видео проигрывается. */
}

/* ==================================================================== */
/* === КОНЕЦ: ОСНОВНЫЕ СТИЛИ ВИДЕОПЛЕЕРА ============================== */
/* ==================================================================== */


/* ==================================================================== */
/* === НАЧАЛО: СТИЛИ КНОПКИ "ПОДПИСАТЬСЯ" (СИНИЙ ДИЗАЙН) ============== */
/* ==================================================================== */
.subscribe-button-kojro {
    position: absolute;                                /* Позиционирует кнопку абсолютно относительно родителя (.video-player-by-kojro). */
    top: 20px;                                         /* Отступ 20px от верхнего края плеера. */
    right: 20px;                                       /* Отступ 20px от правого края плеера. */
    z-index: 10;                                       /* Устанавливает слой выше других элементов. */
    display: flex;                                     /* Включает Flexbox для выравнивания иконки и текста в одну строку. */
    align-items: center;                               /* Выравнивает иконку и текст по вертикали. */
    
    /* 🔥 ИСПРАВЛЕНО: Фон заменен на синий градиент в стиле Telegram для эффекта цветного стекла. */
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.25), rgba(0, 136, 204, 0.15));
    -webkit-backdrop-filter: blur(12px);               /* Применяет эффект размытия фона за кнопкой (для Safari). */
    backdrop-filter: blur(12px);                       /* Стандартное свойство для эффекта "матового стекла". */
    
    color: #ffffff;                                    /* Устанавливает белый цвет текста. */
    font-size: 14px;                                   /* Устанавливает размер шрифта. */
    font-weight: 500;                                  /* Устанавливает среднюю жирность шрифта. */
    text-decoration: none;                             /* Убирает подчеркивание у ссылки. */
    padding: 8px 16px;                                 /* Внутренние отступы: 8px сверху/снизу, 16px слева/справа. */
    border-radius: 5px;                                /* Скругляет углы кнопки. */
    
    /* 🔥 ИСПРАВЛЕНО: Рамка и тень также используют синий оттенок для целостности стиля. */
    border: 1px solid rgba(0, 136, 204, 0.4);          /* Добавляет тонкую синюю рамку. */
    box-shadow: 0 8px 32px 0 rgba(0, 136, 204, 0.2);   /* Добавляет мягкую синюю тень для объема. */
    
    transition: all 0.3s ease;                         /* Добавляет плавную анимацию для всех изменяемых свойств. */
    pointer-events: auto;                              /* Явно указывает, что на кнопку можно нажимать. */
}

/*
   Стили для иконки Telegram внутри кнопки
*/
.subscribe-button-kojro .video-telegram-icon {
    width: 20px;                                       /* Устанавливает ширину иконки. */
    height: 20px;                                      /* Устанавливает высоту иконки. */
    margin-right: 8px;                                 /* Добавляет отступ справа от иконки, чтобы отделить ее от текста. */
    transition: transform 0.3s ease;                   /* Добавляет плавную анимацию для свойства transform. */
}

/*
   :hover состояние для кнопки "Подписаться"
*/
.subscribe-button-kojro:hover {
    /* 🔥 ИСПРАВЛЕНО: Фон становится чуть "плотнее" и ярче, сохраняя синий оттенок. */
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.35), rgba(0, 136, 204, 0.25));
    /* 🔥 ИСПРАВЛЕНО: Рамка становится ярче (белая для контраста). */
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);                       /* Слегка приподнимает кнопку на 3px вверх. */
}
/* ==================================================================== */
/* === КОНЕЦ: СТИЛИ КНОПКИ "ПОДПИСАТЬСЯ" =============================== */
/* ==================================================================== */


/* ==================================================================== */
/* === НАЧАЛО: АНИМАЦИЯ ДЛЯ КНОПКИ (СИНЯЯ ВЕРСИЯ) ====================== */
/* ==================================================================== */
/*
   Псевдоэлемент для создания анимированной "волны"
*/
.subscribe-button-kojro::before {
    content: '';                                       /* Обязательное свойство для создания псевдоэлемента. */
    position: absolute;                                /* Позиционирует псевдоэлемент абсолютно относительно кнопки. */
    z-index: -1;                                       /* Размещает псевдоэлемент ПОД основным контентом кнопки. */
    top: -1px;                                         /* Сдвигает вверх на 1px, чтобы компенсировать рамку. */
    left: -1px;                                        /* Сдвигает влево на 1px, чтобы компенсировать рамку. */
    width: calc(100% + 2px);                           /* Делает ширину на 2px больше, чтобы анимация выходила за рамку. */
    height: calc(100% + 2px);                          /* Делает высоту на 2px больше. */
    border-radius: 5px;                                /* Скругляет углы волны так же, как у кнопки. */
    /* 🔥 ИСПРАВЛЕНО: Применяется новая анимация с синей волной. */
    animation: pulse-wave-blue 3s infinite ease-out;
}

/*
   🔥 ИСПРАВЛЕНО: Описание самой анимации 'pulse-wave-blue'
*/
@keyframes pulse-wave-blue {
    0% {                                               /* Начало анимации. */
        transform: scale(0.95);                        /* Элемент немного сжат. */
        box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5);     /* Тень-обводка синяя и видима. */
    }
    70% {                                              /* 70% времени анимации. */
        transform: scale(1.05);                        /* Элемент немного расширен. */
        box-shadow: 0 0 0 15px rgba(0, 136, 204, 0);    /* Тень-обводка расширилась и стала полностью прозрачной. */
    }
    100% {                                             /* Конец анимации. */
        transform: scale(0.95);                        /* Элемент возвращается в сжатое состояние. */
        box-shadow: 0 0 0 0 rgba(0, 136, 204, 0);       /* Тень остается невидимой, готовясь к новому циклу. */
    }
}
/* ==================================================================== */
/* === КОНЕЦ: АНИМАЦИЯ ДЛЯ КНОПКИ ====================================== */
/* ==================================================================== */


/* ==================================================================== */
/* === НАЧАЛО: АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА) ===================== */
/* ==================================================================== */
/*
   Медиа-запрос: эти стили применяются только на экранах с шириной 640px или меньше.
*/
@media (max-width: 640px) {
    /*
       Уменьшаем кнопку "Play" для маленьких экранов.
    */
    .video-player-by-kojro .play-button {
        width: 60px;                                   /* Уменьшаем ширину кнопки. */
        height: 60px;                                  /* Уменьшаем высоту кнопки. */
    }
    /*
       Адаптируем заголовок для маленьких экранов.
    */
    .video-player-by-kojro .video-title {
        font-size: 1rem;                               /* Уменьшаем размер шрифта (1rem обычно равен 16px). */
        padding: 8px 15px;                             /* Уменьшаем внутренние отступы. */
        bottom: 20px;                                  /* Поднимаем заголовок чуть выше. */
        white-space: normal;                           /* Разрешает тексту переноситься на новую строку. */
        line-height: 1.4;                              /* Увеличивает межстрочный интервал для лучшей читаемости. */
        text-align: center;                            /* Центрирует текст. */
        width: 90%;                                    /* Ограничивает ширину до 90% от ширины плеера. */
        max-width: none;                               /* Сбрасывает max-width, чтобы свойство width работало корректно. */
    }
    /*
       Адаптируем кнопку "Подписаться" для маленьких экранов.
    */
    .subscribe-button-kojro {
        top: 10px;                                     /* Уменьшаем отступ сверху. */
        right: 10px;                                   /* Уменьшаем отступ справа. */
        padding: 6px 12px;                             /* Уменьшаем внутренние отступы. */
        font-size: 12px;                               /* Уменьшаем размер шрифта. */
    }

    .subscribe-button-kojro .video-telegram-icon {
        width: 16px;                                   /* Уменьшаем размер иконки. */
        height: 16px;                                  /* Уменьшаем размер иконки. */
        margin-right: 6px;                             /* Уменьшаем отступ от текста. */
    }
}
/* ==================================================================== */
/* === КОНЕЦ: АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА) ======================= */
/* ==================================================================== */
/* ================================================
   1. Сброс отступов и установка box-sizing
   ================================================ */
.kojro-b-articles-recommended,
.kojro-b-articles-recommended * {
  box-sizing: border-box;  /* ширина/высота включают padding и border */
  margin: 0;               /* убираем внешние отступы */
  padding: 0;              /* убираем внутренние отступы */
}

/* ================================================
   2. Заголовок блока <h2> внутри грида
   ================================================ */
.kojro-b-articles-recommended > h2 {
  grid-column: 1 / -1;     /* растянуть от первой до последней колонки */
  font-size: 18px;         /* размер шрифта заголовка */
  font-weight: 700;        /* жирное начертание */
  color: #333;             /* цвет текста */
  margin-bottom: 15px;     /* отступ снизу перед карточками */
}

/* ================================================
   3. Основной контейнер карточек — адаптивный Grid
   ================================================ */
.kojro-b-articles-recommended {
  display: grid;                                            /* включаем grid */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* создаём адаптивные колонки */
  gap: 20px;                                                /* расстояние между строками и колонками */
  width: 100%;                                              /* ширина контейнера 100% */
  max-width: 1200px;                                        /* ограничиваем максимальную ширину */
  margin: 0 auto;                                           /* центрируем контейнер по горизонтали */
  padding: 20px 10px;                                       /* внутренние отступы по краям */
  font-family: Arial, sans-serif;                           /* задаём шрифты для текста */
}

/* ================================================
   4. Карточка — ссылка и её базовый стиль
   ================================================ */
.kojro-b-articles-recommended__item-link {
  display: flex;                                            /* включаем flex-контейнер */
  flex-direction: column;                                   /* картинка сверху, тело карточки снизу */
  background: #fff;                                         /* белый фон карточки */
  border-radius: 8px;                                       /* скруглённые углы */
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);                   /* лёгкая тень под карточкой */
  overflow: hidden;                                         /* обрезаем выступающие части внутренних элементов */
  text-decoration: none;                                    /* убираем подчёркивание у ссылки */
  color: inherit;                                           /* наследуем цвет текста из родителя */
  height: 100%;                                             /* растягиваемся на всю высоту grid-ячейки */
  position: relative;                                       /* для абсолютного псевдоэлемента эффекта волны */
  transition: transform .3s ease,                           /* плавное изменение трансформации */
              box-shadow .3s ease;                         /* плавное изменение тени */
}
/* Hover-эффект «парения» */
.kojro-b-articles-recommended__item-link:hover {
  transform: translateY(-5px);                              /* поднимаем карточку вверх */
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);                  /* усиливаем тень при hover */
}

/* ================================================
   5. Эффект «волны» при наведении
   ================================================ */
.kojro-b-articles-recommended__item-link {
  position: relative;                                       /* дублируем для уверенности */
  overflow: hidden;                                         /* обрезаем за границами */
}
.kojro-b-articles-recommended__item-link::after {
  content: '';                                              /* создаём пустой псевдоэлемент */
  position: absolute;                                       /* позиционируем поверх карточки */
  inset: 0;                                                 /* растягиваем на всю область */
  pointer-events: none;                                     /* не мешаем кликам */
  opacity: 0;                                               /* по умолчанию невидим */
  transition: opacity 0.3s;                                 /* плавное появление/исчезновение */
  background: radial-gradient(                              /* градиент для волны */
    circle at 50% 50%,
    rgba(255,255,255,0.8) 0%,
    rgba(255,255,255,0.5) 70%,
    rgba(255,255,255,0) 100%
  );
}
.kojro-b-articles-recommended__item-link:hover::after {
  opacity: 1;                                               /* волна становится видимой */
  animation: kojro-wave 0.6s ease-out forwards;             /* проигрываем анимацию волны */
}
@keyframes kojro-wave {
  0%   { transform: scale(0.7); opacity: 0.5; }             /* стартовый размер и прозрачность */
  60%  { transform: scale(1.2); opacity: 0.8; }             /* разворот и максимум видимости */
  100% { transform: scale(1.6); opacity: 0.1; }             /* размытая финальная фаза */
}

/* ================================================
   6. Обёртка для картинки — поддерживаем соотношение 16:9
   ================================================ */
.kojro-b-articles-recommended__item-img-wrapper {
  width: 100%;                                              /* ширина на 100% контейнера */
  height: 0;                                                /* обнуляем высоту для расчёта через padding */
  padding-top: 56.25%;                                      /* соотношение 16:9: (9/16)*100% */
  position: relative;                                       /* для абсолютного позиционирования img */
  overflow: hidden;                                         /* обрезаем выступающие части картинки */
}
.kojro-b-articles-recommended__item-img {
  position: absolute;                                       /* позиционируем внутри обёртки */
  top: 0;                                                   /* привязываем к верхнему краю */
  left: 0;                                                  /* привязываем к левому краю */
  width: 100%;                                              /* растягиваем по ширине */
  height: 100%;                                             /* растягиваем по высоте */
  object-fit: cover;                                        /* обрезаем/масштабируем картинку по пропорциям */
  transition: transform .3s ease;                           /* плавное увеличение при hover */
}
/* Лёгкое увеличение картинки при hover */
.kojro-b-articles-recommended__item-link:hover
  .kojro-b-articles-recommended__item-img {
  transform: scale(1.03);                                   /* чуть увеличиваем картинку */
}

/* ================================================
   7. Блок с текстом внутри карточки — flex для равной высоты
   ================================================ */
.kojro-b-articles-recommended__item-body {
  display: flex;                                            /* включаем flex-контейнер */
  flex-direction: column;                                   /* располагаем элементы по вертикали */
  flex: 1;                                                  /* растягиваем тело, чтобы заполнить пространство */
  padding: 15px;                                            /* внутренние отступы вокруг текста */
}
.kojro-b-articles-recommended__item-body header {
  margin-bottom: 8px;                                       /* отступ между заголовком и остальным текстом */
}
.kojro-b-articles-recommended__item-title {
  font-size: 16px;                                          /* размер шрифта заголовка статьи */
  font-weight: 700;                                         /* жирное начертание */
  color: #333;                                              /* цвет текста */
  line-height: 1.3;                                         /* межстрочный интервал */
}
.kojro-b-articles-recommended__item-text {
  font-size: 14px;                                          /* размер шрифта основного текста */
  color: #666;                                              /* цвет текста */
  line-height: 1.5;                                         /* межстрочный интервал */
  margin-top: auto;                                         /* прижимает текст к низу карточки */
}

/* ================================================
   8. Медиа-запрос для очень узких экранов (<480px)
   ================================================ */
@media (max-width: 480px) {
  .kojro-b-articles-recommended {
    padding: 10px;                                          /* уменьшаем внутренние отступы */
    gap: 15px;                                              /* уменьшаем расстояние между элементами */
  }
  .kojro-b-articles-recommended__item-title {
    font-size: 15px;                                        /* уменьшаем размер заголовка */
  }
  .kojro-b-articles-recommended__item-text {
    font-size: 13px;                                        /* уменьшаем размер основного текста */
  }
}

.responsive-image {
width: 100%; /* Изображение занимает 100% ширины родительского контейнера */
height: auto; /* Высота автоматически подстраивается под ширину */
}

/* Основной стиль кнопки Telegram */
.telegram-button {
    background: #0088cc; /* Синий фон кнопки */
    border: 3px solid #007bb8; /* Синяя рамка толщиной 3px */
    border-radius: 50%; /* Кнопка делает круглой за счёт закругления углов */
    box-shadow: 0 8px 10px rgba(0, 136, 204, 0.6); /* Тень для кнопки */
    cursor: pointer; /* Изменение курсора на указатель при наведении */
    height: 68px; /* Высота кнопки */
    text-align: center; /* Текст (или иконка) центрируется по горизонтали */
    width: 68px; /* Ширина кнопки */
    position: fixed; /* Кнопка фиксирована и остаётся на одном месте при скролле */
    right: 3%; /* Расстояние от правого края экрана */
    bottom: 18%; /* Расстояние от нижнего края экрана */
    padding: 0px !important; /* Убирается любое внутреннее отступление */
    z-index: 9999; /* Кнопка находится поверх других элементов */
    transition: 0.3s; /* Плавный переход для всех изменений */
    -webkit-animation: hoverWaveTelegram linear 2s infinite; /* Анимация "волны" для браузеров на базе WebKit */
    animation: hoverWaveTelegram linear 2s infinite; /* Анимация "волны" для кнопки Telegram */
}

.telegram-icon {
    position: absolute; /* Абсолютное позиционирование */
    top: 1%; /* Центрирование по вертикали */
    left: 16%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Сдвигаем элемент на 50% своих размеров */
    width: 90%; /* Ширина будет 90% от ширины родительского элемента */
    max-width: 42px; /* Максимальная ширина 42px */
    height: 90%; /* Высота автоматически подстраивается под пропорции */
    color: #fff; /* Белый цвет иконки */
    line-height: 68px; /* Высота строки для выравнивания иконки по вертикали */
    transition: 0.5s ease-in-out; /* Плавный эффект на изменения */
    animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" */
    -webkit-animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" для WebKit */
}

/* Внутренний контейнер кнопки */
.telegram-button .text-button {
    height: 68px; /* Высота внутреннего контейнера */
    width: 68px; /* Ширина внутреннего контейнера */
    border-radius: 50%; /* Круглая форма */
    position: relative; /* Для задания позиции дочерних элементов */
    overflow: hidden; /* Скрывает всё, что выходит за границы контейнера */
}

/* Стиль текста внутри кнопки (скрыт по умолчанию) */
.telegram-button .text-button span {
    text-align: center; /* Центровка текста */
    color: #00bfff; /* Цвет текста (светло-синий) */
    opacity: 0; /* Текст невидим */
    font-size: 0; /* Размер текста 0 (скрытие) */
    position: absolute; /* Позиционирование текста относительно контейнера */
    right: 13px; /* Сдвиг текста от правого края */
    top: 27px; /* Сдвиг текста от верхнего края */
    line-height: 14px; /* Высота строки текста */
    font-weight: 600; /* Полужирное начертание текста */
    transition: opacity 0.3s linear; /* Плавное появление текста (прозрачность) */
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* Шрифт текста */
}

/* Появление текста при наведении */
.telegram-button .text-button:hover span {
    opacity: 1; /* Текст становится видимым */
    font-size: 11px; /* Размер текста увеличивается */
}

/* Скрытие иконки при наведении */
.telegram-button:hover .telegram-icon {
    display: none; /* Иконка исчезает */
    color: #0088cc; /* Цвет иконки */
    font-size: 44px; /* Размер иконки */
    transition: 0.3s; /* Плавное исчезновение */
}

/* Изменения самой кнопки при наведении */
.telegram-button:hover {
    z-index: 1; /* Кнопка поднимается на передний план */
    background: #fff; /* Фон кнопки меняется на белый */
    color: transparent; /* Цвет текста становится прозрачным */
    transition: 0.3s; /* Плавные изменения */
}

/* Анимация "эффект волны" при наведении Telegram */
@-webkit-keyframes hoverWaveTelegram {
    0% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 0 rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 15px rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 26.7px rgba(0, 136, 204, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 40px rgba(0, 136, 204, 0);
    }
}

/* То же самое для всех браузеров */
@keyframes hoverWaveTelegram {
    0% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 0 rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 15px rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 26.7px rgba(0, 136, 204, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 40px rgba(0, 136, 204, 0);
    }
}

/* Анимация "тряски" кнопки */
@keyframes shake {
    0% {
        transform: rotateZ(0deg); /* Без вращения */
    }
    10% {
        transform: rotateZ(-30deg); /* Вращение против часовой стрелки */
    }
    20% {
        transform: rotateZ(15deg); /* Вращение по часовой стрелке */
    }
    /* ... */
    100% {
        transform: rotateZ(0deg); /* Возврат в исходное положение */
    }
}

@media (max-width: 800px) {
    .telegram-button {
        bottom: 25px; /* Отступ кнопки снизу от экрана */
        right: 120px; /* Отступ кнопки справа от экрана */
    }
}
/* End */


/* Start:/local/templates/KOJRO - HOME/template_styles.css?177249104374801*/
/* Авторство: kojro */
/* Начало СТИЛЕЙ v1.5 */

.kojro-certificates-section {
    /* Цвета */
    --kojro-primary-color: #6a11cb; /* Глубокий фиолетовый */
    --kojro-secondary-color: #2575fc; /* Яркий синий */
    --kojro-gradient-start: #a76ff0; /* Светлее фиолетовый для градиента */
    --kojro-gradient-end: #61a9f1; /* Светлее синий для градиента */
    --kojro-dark-overlay: rgba(0, 0, 0, 0.85); /* Более темный фон модалки */
    --kojro-light-overlay: rgba(255, 255, 255, 0.1);
    --kojro-text-color: #333;
    --kojro-white: #fff;
    --kojro-bg-light: #f0f0f0; /* Светлый фон секции */

    /* Тени (Неоморфный/объемный эффект) */
    --kojro-shadow-light: -5px -5px 15px var(--kojro-white), 5px 5px 15px rgba(174, 174, 192, 0.2);
    --kojro-shadow-deep: 10px 10px 30px rgba(0, 0, 0, 0.2), -5px -5px 15px rgba(255, 255, 255, 0.7);
    --kojro-inner-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px var(--kojro-white);

    /* Длительность переходов */
    --kojro-transition-duration: 0.4s;

    padding: 60px 0; /* Общий вертикальный отступ для всей секции */
    background-color: var(--kojro-bg-light); /* Фон для всего блока */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box; /* Важно для адаптивной верстки */
}

/* Обнуление отступов и полей для удобства */
.kojro-certificates-section * {
    box-sizing: inherit;
}
.kojro-certificates-section h1, .kojro-certificates-section h2, .kojro-certificates-section h3, .kojro-certificates-section p, .kojro-certificates-section ul {
    margin: 0;
    padding: 0;
}

.kojro-container.kojro-section-container {
    max-width: 1300px;
    margin: 0 auto;
    /* Убраны вертикальные паддинги, чтобы управлять ими через заголовок и сетку */
    padding: 0 20px;
}

.kojro-section-title {
    text-align: center;
    font-size: 3em;
    font-weight: 700;
    /* ИСПРАВЛЕНИЕ: Увеличен margin-top для общего отступа сверху контейнера */
    margin-top: 60px; /* Увеличил отступ сверху, чтобы создать больше пространства */
    /* ИСПРАВЛЕНИЕ: Отрегулирован margin-bottom, чтобы подчеркивание не наезжало на текст, а потом был достаточный отступ до сетки */
    margin-bottom: 50px; /* Отступ до сетки сертификатов. Основной отступ теперь будет на grid. */
    background: linear-gradient(45deg, var(--kojro-primary-color), var(--kojro-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
    position: relative;
}

.kojro-section-title::after {
    content: '';
    position: absolute;
    bottom: -15px; /* Подчеркивание немного выступает за базовую линию заголовка */
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--kojro-primary-color), var(--kojro-secondary-color));
    border-radius: 2px;
}

/* Сетка сертификатов */
.kojro-certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    justify-content: center;
    /* ИСПРАВЛЕНИЕ: Добавлен явный margin-top для сетки, чтобы отодвинуть ее от заголовка */
    margin-top: 50px; /* Дополнительный отступ сверху для сетки */
}

/* Карточка сертификата */
.kojro-certificate-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--kojro-shadow-light); /* Неоморфная тень */
    cursor: pointer;
    transition: transform var(--kojro-transition-duration) ease-in-out,
                box-shadow var(--kojro-transition-duration) ease-in-out;
    background: var(--kojro-bg-light);
    aspect-ratio: 3/4; /* Примерное соотношение сторон */
    display: flex; /* Для центрирования оверлея */
    align-items: center;
    justify-content: center;
    outline: none; /* Убираем стандартный outline для доступности */
}

.kojro-certificate-item:hover,
.kojro-certificate-item:focus { /* Добавляем стили для фокуса */
    transform: translateY(-12px) scale(1.03);
    box-shadow: var(--kojro-shadow-deep); /* Более глубокая тень при наведении */
}

.kojro-certificate-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px; /* Скругляем углы изображения под карточку */
    transition: transform var(--kojro-transition-duration) ease-in-out, filter var(--kojro-transition-duration) ease-in-out;
}

.kojro-certificate-item:hover .kojro-certificate-thumbnail,
.kojro-certificate-item:focus .kojro-certificate-thumbnail {
    transform: scale(1.08); /* Чуть больше масштабирование */
    filter: brightness(0.7); /* Затемнение изображения при наведении */
}

.kojro-certificate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--kojro-transition-duration) ease-in-out;
    border-radius: 20px;
}

.kojro-certificate-item:hover .kojro-certificate-overlay,
.kojro-certificate-item:focus .kojro-certificate-overlay {
    opacity: 1;
}

.kojro-view-icon {
    font-size: 3.5em;
    color: var(--kojro-white);
    background: linear-gradient(45deg, var(--kojro-gradient-start), var(--kojro-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-radius: 50%; /* Круглая иконка */
    padding: 10px;
    transform: translateY(30px) scale(0.8);
    opacity: 0;
    transition: transform var(--kojro-transition-duration) ease-in-out, opacity var(--kojro-transition-duration) ease-in-out;
}

.kojro-certificate-item:hover .kojro-view-icon,
.kojro-certificate-item:focus .kojro-view-icon {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Модальное окно */
.kojro-modal {
    display: none; /* Скрыть по умолчанию */
    position: fixed;
    z-index: 10000; /* Очень высокий z-index, чтобы быть поверх всего */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Важно для предотвращения прокрутки внутри модалки, если контент не помещается */
    background-color: var(--kojro-dark-overlay); /* Затемнение фона */
    backdrop-filter: blur(10px); /* Сильное размытие фона */
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none; /* Не реагирует на события, когда скрыт */
    transition: opacity var(--kojro-transition-duration) ease-out;
}

.kojro-modal.kojro-is-open {
    display: flex;
    opacity: 1;
    pointer-events: auto; /* Реагирует на события, когда открыт */
}

.kojro-modal-content {
    position: relative;
    background: var(--kojro-bg-light);
    border-radius: 15px;
    box-shadow: var(--kojro-shadow-deep);
    max-width: 90%;
    max-height: 90%;
    padding: 20px; /* Добавим внутренние отступы */
    display: flex;
    flex-direction: column; /* Элементы идут сверху вниз */
    justify-content: center;
    align-items: center;
    transform: scale(0.7); /* Анимация появления */
    opacity: 0;
    transition: transform var(--kojro-transition-duration) ease-out, opacity var(--kojro-transition-duration) ease-out;
}

.kojro-modal.kojro-is-open .kojro-modal-content {
    transform: scale(1);
    opacity: 1;
}

.kojro-modal-image {
    max-width: 100%;
    max-height: 70vh; /* Ограничиваем высоту изображения, чтобы было место для описания и кнопки */
    height: auto; /* Сохраняем пропорции */
    width: auto; /* Сохраняем пропорции */
    display: block;
    border-radius: 10px;
    box-shadow: var(--kojro-inner-shadow); /* Внутренняя тень для эффекта вдавленности */
    margin-bottom: 20px; /* Отступ от описания */
    order: 1; /* Порядок отображения: изображение первым */
}

/* Описание сертификата */
.kojro-certificate-description {
    font-size: 1.3em;
    color: var(--kojro-text-color);
    margin-bottom: 20px; /* Отступ от кнопки PDF */
    text-align: center;
    max-width: 80%;
    order: 2; /* Порядок отображения: описание вторым */
}

/* Кнопка закрытия */
.kojro-modal-close {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #666; /* Более строгий цвет */
    /* ИСПРАВЛЕНИЕ: Увеличен размер крестика */
    font-size: 3.5em; /* Увеличен размер */
    font-weight: normal; /* Обычный вес шрифта для символа '×' */
    cursor: pointer;
    transition: color var(--kojro-transition-duration) ease-in-out, transform var(--kojro-transition-duration) ease-in-out;
    outline: none; /* Убираем стандартный outline */
    transform: none; /* Убрано вращение при наведении */
}

.kojro-modal-close:hover,
.kojro-modal-close:focus {
    color: var(--kojro-primary-color);
    transform: scale(1.1); /* Легкое увеличение при наведении */
}

.kojro-modal-actions {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 10px; /* Отступ снизу */
    order: 3; /* Порядок отображения: кнопки действий третьими */
}

.kojro-modal-download-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px;
    background: linear-gradient(45deg, var(--kojro-primary-color), var(--kojro-secondary-color));
    color: var(--kojro-white);
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--kojro-transition-duration) ease, box-shadow var(--kojro-transition-duration) ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    outline: none; /* Убираем стандартный outline */
}

.kojro-modal-download-btn:hover,
.kojro-modal-download-btn:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.kojro-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.25); /* Более светлый фон для кнопок навигации */
    border: none;
    color: var(--kojro-white);
    width: 50px; /* Фиксированная ширина */
    height: 50px; /* Фиксированная высота */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    cursor: pointer;
    border-radius: 8px; /* Закругленные углы */
    transition: background var(--kojro-transition-duration) ease-in-out, transform var(--kojro-transition-duration) ease-in-out;
    backdrop-filter: blur(8px); /* Более сильный эффект размытия */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    outline: none; /* Убираем стандартный outline */
    z-index: 10; /* Убедимся, что навигация над контентом модалки */
}

.kojro-modal-nav:hover,
.kojro-modal-nav:focus {
    background: var(--kojro-primary-color);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.kojro-modal-prev {
    left: 20px;
}

.kojro-modal-next {
    right: 20px;
}

/* Вспомогательный класс для доступности */
.kojro-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .kojro-section-title {
        font-size: 2em;
        margin-bottom: 40px; /* Отступ на мобильных */
        margin-top: 30px; /* Отступ сверху на мобильных */
    }

    .kojro-certificates-grid {
        margin-top: 30px; /* Отступ сверху для сетки на мобильных */
        grid-template-columns: 1fr; /* Один столбец на мобильных */
        gap: 30px;
    }

    .kojro-certificate-item {
        max-width: 350px; /* Ограничение ширины для мобильных */
        margin: 0 auto;
    }

    .kojro-modal-content {
        padding: 10px;
        max-width: 95%; /* Чуть больше пространства */
        max-height: 95%;
    }

    .kojro-modal-image {
        max-height: 60vh; /* Ещё меньше высота на мобильных */
        margin-bottom: 15px;
    }

    .kojro-certificate-description {
        font-size: 1.1em;
        margin-bottom: 15px;
    }

    .kojro-modal-close {
        font-size: 2.5em; /* Размер крестика на мобильных */
        top: 10px;
        right: 15px;
    }

    .kojro-modal-nav {
        width: 40px; /* Меньший размер на мобильных */
        height: 40px;
        font-size: 1.2em;
        left: 10px;
        right: 10px;
        transform: translateY(-50%) scale(0.9); /* Чуть меньше */
    }
    .kojro-modal-nav:hover {
        transform: translateY(-50%) scale(1);
    }
    .kojro-modal-download-btn {
        font-size: 1em;
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    .kojro-modal-nav {
        font-size: 1em;
        width: 35px;
        height: 35px;
    }
}

/* Конец СТИЛЕЙ v1.5 */










/* Начало кода таблицы */
    /* Стили таблицы */
    .kojro-table-container {
      width: 100%;
      box-sizing: border-box;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 20px;
      padding: 0 10px;
    }
    
    .kojro-custom-table {
      width: 100%;
      border-collapse: collapse;
      background-color: #fff;
      border: 1px solid #ddd;
      table-layout: auto;
      margin: 0 auto;
    }
    
    .kojro-custom-table th,
    .kojro-custom-table td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ddd;
      vertical-align: middle;
      word-break: break-word;
    }
    
    /* Фиксируем ширину столбца с цифрами */
    .kojro-custom-table th:first-child,
    .kojro-custom-table td:first-child {
      white-space: nowrap;
      width: 30px;
    }
    
    .kojro-custom-table th {
      background-color: #4CAF50;
      color: #fff;
      font-weight: bold;
    }
    
    .kojro-custom-table tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    
    .kojro-custom-table tr:hover {
      background-color: #e9e9e9;
      transition: background-color 0.2s ease;
    }
    
    /* Рукописный стиль */
    .kojro-custom-table .handwriting {
      font-family: 
        'Segoe Script', 'Brush Script MT',
        'Apple Chancery', cursive;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.3;
      color: #333;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 600px) {
      .kojro-custom-table th,
      .kojro-custom-table td {
        padding: 8px 6px;
        font-size: 14px;
      }
      
      .kojro-custom-table .handwriting {
        font-size: 16px;
      }
      
      /* Уменьшаем ширину первых двух столбцов */
      .kojro-custom-table th:nth-child(1),
      .kojro-custom-table td:nth-child(1),
      .kojro-custom-table th:nth-child(2),
      .kojro-custom-table td:nth-child(2) {
        width: auto;
        min-width: 30px;
      }
    }

/* Конец код таблицы*/


/* ================================================
                    START TOP MENU BAR
   ================================================ */
.kojro-top-bar-container {
    --kojro-tb-primary-color: #007bff;
    --kojro-tb-secondary-color: #6c757d;
    --kojro-tb-accent-color: #28a745; /* Остается для возможных будущих акцентов */
    --kojro-tb-text-color: #333;
    --kojro-tb-light-text-color: #f8f9fa;
    --kojro-tb-background-color: #fff;
    --kojro-tb-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --kojro-tb-border-radius: 8px;
    --kojro-tb-transition-duration: 0.3s;

    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--kojro-tb-background-color);
    box-shadow: var(--kojro-tb-shadow);
    padding: 10px 0;
    
    font-family: 'Arial', sans-serif;
    color: var(--kojro-tb-text-color);
    line-height: 1.6;
    box-sizing: border-box;
}

.kojro-top-bar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; /* Для позиционирования мобильного меню */
}

.kojro-logo-link {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--kojro-tb-primary-color);
    text-decoration: none;
    transition: color var(--kojro-tb-transition-duration) ease;
}

.kojro-logo-link:hover {
    color: var(--kojro-tb-accent-color);
}

/* Стили для списка навигации (десктоп) */
.kojro-nav-list {
    display: flex; /* По умолчанию на десктопе - flex */
    list-style: none;
    margin: 0;
    padding: 0;
}

.kojro-nav-item {
    margin-left: 30px;
}

.kojro-nav-link {
    text-decoration: none;
    color: var(--kojro-tb-text-color);
    font-weight: 500;
    font-size: 1.1em;
    padding: 8px 0;
    position: relative;
    transition: color var(--kojro-tb-transition-duration) ease;
}

/* Эффект подчеркивания при наведении */
.kojro-nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--kojro-tb-primary-color);
    transition: width var(--kojro-tb-transition-duration) ease-out;
}

.kojro-nav-link:hover::after,
.kojro-nav-link:focus::after {
    width: 100%;
}

.kojro-nav-link:hover {
    color: var(--kojro-tb-primary-color);
}

/* Стили для скрытого чекбокса */
.kojro-menu-toggle {
    display: none; /* Полностью скрываем чекбокс */
}

/* Стили для лейбла (гамбургер-иконки) - по умолчанию скрыта на десктопе */
.kojro-hamburger-label {
    display: none; /* Скрываем на десктопе */
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 1001; /* Поверх всего */
    margin-right: 10px; /* Отступ от края */
}

.kojro-hamburger-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--kojro-tb-text-color);
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: all var(--kojro-tb-transition-duration) ease-in-out;
}

.kojro-hamburger-line:nth-child(1) { top: 0; }
.kojro-hamburger-line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.kojro-hamburger-line:nth-child(3) { bottom: 0; }

/* ======================================= */
/* 📱 Медиазапрос для мобильных устройств  */
/* ======================================= */
@media (max-width: 768px) {
    .kojro-top-bar-container {
        display: block;
        padding: 5px 0;
    }

    /* Гамбургер-лейбл виден на мобильных */
    .kojro-hamburger-label {
        display: block; /* Показываем гамбургер на мобильных */
    }

    /* Навигационный список по умолчанию скрыт на мобильных */
    .kojro-nav-list {
        display: none; /* Скрываем список на мобильных по умолчанию */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--kojro-tb-background-color);
        box-shadow: var(--kojro-tb-shadow);
        padding: 10px 0;
        z-index: 999;
    }

    /* Когда чекбокс активен, показываем меню (используем ~ для выбора соседнего элемента) */
    .kojro-menu-toggle:checked ~ .kojro-nav-list {
        display: flex;
    }

    .kojro-nav-item {
        margin: 0;
        text-align: center;
        width: 100%;
    }

    .kojro-nav-link {
        display: block;
        padding: 15px 20px;
        font-size: 1.2em;
        border-bottom: 1px solid #eee;
    }

    .kojro-nav-link:last-child {
        border-bottom: none;
    }

    .kojro-nav-link::after {
        display: none;
    }

    /* Стили для активного состояния гамбургера (крестик) */
    .kojro-menu-toggle:checked ~ .kojro-hamburger-label .kojro-hamburger-line:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .kojro-menu-toggle:checked ~ .kojro-hamburger-label .kojro-hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .kojro-menu-toggle:checked ~ .kojro-hamburger-label .kojro-hamburger-line:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }
}

/* ================================================
                    END TOP BAR
   ================================================ */

    /*<!-- Блог - классы  -->
        .page-title { font-family: Arial, sans-serif; font-size: 2.5em; text-align: center; margin-bottom: 20px; color: #2c3e50; }
        .intro-text { font-family: Arial, sans-serif; font-size: 1.1em; text-align: center; margin-bottom: 30px; color: #555; line-height: 1.6; }
        .kojro-author-block { font-family: Arial, sans-serif; text-align: center; font-size: 0.9em; color: #777; margin-bottom: 40px; padding: 10px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
        .hero-image { max-width: 100%; height: auto; display: block; margin: 20px auto; border-radius: 8px; }
        .checklist-section { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin-bottom: 40px; }
        .checklist-section h2 { font-size: 2em; margin-top: 40px; border-bottom: 2px solid #eee; padding-bottom: 10px; color: #2c3e50; }
        .checklist-section h3 { font-size: 1.5em; margin-top: 30px; color: #2c3e50; }
        .checklist-section ol { list-style-type: decimal; padding-left: 20px; margin-top: 10px; margin-bottom: 15px; }
        .checklist-section li { margin-bottom: 15px; line-height: 1.8; }
        .checklist-section details { background-color: #e9f7fe; border-left: 4px solid #007bff; padding: 10px 15px; margin-top: 10px; border-radius: 4px; }
        .checklist-section summary { cursor: pointer; font-weight: bold; }
        .checklist-section details p { margin: 5px 0 0 0; font-size: 0.9em; }
        .conclusion-block { font-family: Arial, sans-serif; background-color: #dff0d8; border-left: 4px solid #4CAF50; padding: 25px; margin-top: 50px; text-align: center; border-radius: 8px; }
        .conclusion-block h2 { color: #4CAF50; margin-top: 0; font-size: 2em; }
        .cta-button { display: inline-block; background-color: #4CAF50; color: #fff; padding: 15px 30px; text-decoration: none; border-radius: 5px; margin-top: 20px; font-size: 1.2em; font-weight: bold; transition: background-color 0.3s ease; }
        .cta-button:hover { background-color: #45a049; }*/

/* === START OF KOJRO PROMO BLOCK CODE === */

/* ================================================
   1. Сброс стилей и общие настройки для kojro-promo-block
   ================================================ */
.kojro-promo-block,
.kojro-promo-block * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.kojro-promo-block {
    width: 100%;
    max-width: 1440px; /* Максимальная ширина самого блока */
    margin: 0 auto;
    padding: 80px 15px; /* Общие отступы по краям для блока */
    font-family: Arial, sans-serif;
    background-color: transparent;
}

/* ================================================
   2. Структура сетки (FLEXBOX)
   ================================================ */
.kojro-promo-grid-wrapper {
    display: flex;
    gap: 20px;
    align-items: stretch; /* Растягиваем колонки по высоте */
    flex-wrap: nowrap; /* По умолчанию: не переносим, держим в 3 колонки */
}

.kojro-promo-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0; /* Важно для flex-элементов, чтобы они могли сжиматься */
}

.kojro-promo-column--left,
.kojro-promo-column--right {
    flex: 1 1 0; /* Равномерно распределяем пространство, базовая ширина 0 */
    min-width: 220px; /* Минимальная ширина, чтобы не было слишком узко */
}

.kojro-promo-column--center {
    flex: 2 1 0; /* Занимает в 2 раза больше пространства, чем боковые */
    min-width: 300px;
}

.kojro-center-bottom-grid {
    display: flex;
    gap: 20px;
    min-width: 0;
}

.kojro-center-bottom-grid > .kojro-promo-item {
    flex: 1 1 0; /* Равномерно распределяем пространство */
    min-width: 0;
}

/* ================================================
   3. Карточка (Градиент, Рамка, Эффекты)
   ================================================ */
.kojro-promo-item {
    display: flex;
    flex-grow: 1;
    min-width: 0; /* Важно для flex-элементов внутри сетки */
}

.kojro-promo-item-link {
    display: flex;
    flex-direction: column; /* Теперь это flex-контейнер для header и body */
    height: 100%; /* Чтобы flex-элементы внутри занимали всю высоту */
    width: 100%;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    
    background: linear-gradient(135deg, #7f8ee2 0%, #e1738b 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    
    box-shadow: 0 8px 24px rgba(127, 142, 226, 0.15); /* Мягкая тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 0;
}

.kojro-promo-item-link:hover {
    transform: translateY(-3px); /* Легкий подъем при наведении */
    box-shadow: 0 16px 40px rgba(225, 115, 139, 0.21); /* Усиленная тень при наведении */
    border-color: rgba(255, 255, 255, 0.8);
}

/* ================================================
   4. ВЕРХНЯЯ СЕКЦИЯ КАРТОЧКИ (Желтый фон, Тексты, Логотип) - ПРОПОРЦИЯ 90%
   ================================================ */
.kojro-promo-header-area {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 150px; /* Увеличена минимальная высота для жёлтой части */
    flex: 9 1 0%; /* Жёлтая секция теперь занимает ~90% */
    flex-shrink: 0; /* Запрещаем сжиматься по высоте, если контент не позволяет */
    
    background: #FFDE59; /* Желтый фон */
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.21);
    border-radius: 16px 16px 0 0;
    
    position: relative;
    overflow: hidden;
}

.kojro-promo-header-text {
    flex: 1;
    min-width: 0; /* Позволяем тексту сжиматься */
    padding: 35px 24px 20px 24px; /* Увеличен padding-top для "воздуха" сверху */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Текст по центру вертикали */
    z-index: 1; /* Чтобы быть над бликом */
}

.kojro-promo-subtitle {
    font-size: 1.35rem; /* Увеличен, был 1.25rem */
    font-weight: 700;
    color: #1c2738; /* Темно-серый цвет текста */
    margin-bottom: 7px;
    line-height: 1.2;
    overflow-wrap: break-word; /* Перенос длинных слов */
    word-break: break-word;
}

.kojro-promo-subdesc {
    font-size: 0.9rem; /* Немного уменьшен, был 1rem */
    color: #323232; /* Серый цвет текста */
    line-height: 1.35;
    font-weight: 400;
    overflow-wrap: break-word;
    word-break: break-word;
}

.kojro-promo-thumbnail-wrapper {
    width: 140px; /* Увеличена ширина области для логотипа */
    flex-shrink: 0;
    display: flex;
    align-items: flex-end; /* Прижимаем логотип к низу */
    justify-content: center;
    padding: 0px 10px 0px 10px; /* Скорректированы отступы, padding-bottom: 0 */
}

.kojro-promo-thumbnail {
    display: block;
    max-width: 180px; /* Значительно увеличен размер логотипа */
    max-height: 200px; /* Увеличен размер логотипа, чтобы он мог касаться нижней границы */
    width: auto;
    height: auto;
    object-fit: contain; /* Сохраняем пропорции изображения */
}

/* Стили для БОЛЬШОЙ центральной карточки (теперь тоже 90/10) */
.kojro-promo-item--large .kojro-promo-header-area {
    /* flex: 9 1 0%; наследуется от .kojro-promo-header-area */
    min-height: 320px; /* Большая минимальная высота для жёлтого фона */
}
.kojro-promo-item--large .kojro-promo-header-text {
    padding: 45px 36px 30px 36px; /* Увеличен padding-top для большой карточки */
    justify-content: flex-start; /* Заголовок прижат к верху */
}
.kojro-promo-item--large .kojro-promo-thumbnail-wrapper {
    width: 200px; /* Увеличена ширина области для большого логотипа */
    padding: 0px 15px 0px 15px; /* Скорректированы отступы, padding-bottom: 0 */
}
.kojro-promo-item--large .kojro-promo-thumbnail {
    max-width: 140px; /* Значительно увеличен размер большого логотипа */
    max-height: 155px; /* Увеличен размер большого логотипа */
}
.kojro-promo-item--large .kojro-promo-subtitle {
    font-size: 1.85rem; /* Увеличен, был 1.7rem */
}

.kojro-promo-item--large .kojro-promo-subdesc {
    font-size: 1.05rem; /* Немного уменьшен, был 1.18rem */
}

/* ================================================
   5. НИЖНЯЯ СЕКЦИЯ КАРТОЧКИ (Белый фон, Сине-фиолетовый текст) - ПРОПОРЦИЯ 10%
   ================================================ */
.kojro-promo-item-body {
    flex-grow: 1;
    width: 100%;
    padding: 17px 18px; /* Отступы для текста */
    background: #fff; /* Белый фон */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Выравнивает текст по центру вертикали */
    min-width: 0;
    flex: 1 1 0%; /* Белая секция теперь занимает ~10% */
    min-height: 50px; /* Минимальная высота, чтобы текст не слишком сжимался */
}

/* Стили для БОЛЬШОЙ центральной карточки (теперь тоже 90/10) */
.kojro-promo-item--large .kojro-promo-item-body {
    /* flex: 1 1 0%; наследуется от .kojro-promo-item-body */
    min-height: 60px; /* Пропорциональная мин. высота для белого фона */
}

.kojro-promo-item-title {
    font-size: 1.08rem; /* Немного увеличен, был 1rem */
    font-weight: 700;
    color: #7254E0; /* Сине-фиолетовый цвет текста */
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ================================================
   6. Эффект блика (Shine)
   ================================================ */
.kojro-promo-header-area.kojro-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%; /* Начинаем за пределами слева */
    width: 42%; /* Ширина блика */
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.29) 33%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg); /* Наклон блика */
    transition: left 0.7s ease-in-out; /* Анимация только при ховере, по умолчанию статичен */
    z-index: 2;
}

.kojro-promo-item-link:hover .kojro-promo-header-area.kojro-shine::after {
    left: 140%; /* Перемещаем блик вправо за пределы блока */
    transition: left 0.8s ease-in-out; /* Более плавная анимация при ховере */
}

/* ================================================
   7. Адаптивность (Переработана и оптимизирована)
   ================================================ */

/* Медиа-запросы для больших планшетов и настольных ПК с меньшей шириной */
@media (max-width: 1200px) {
    .kojro-promo-block { padding: 38px 8px; }
    .kojro-promo-header-text {
        padding: 30px 20px 18px 20px;
    }
    .kojro-promo-item--large .kojro-promo-header-text {
        padding: 40px 28px 24px 28px;
    }
    .kojro-promo-subtitle { font-size: 1.25rem; }
    .kojro-promo-thumbnail-wrapper {
        width: 110px;
        padding: 0px 8px 0px 8px;
    }
    .kojro-promo-thumbnail {
        max-width: 80px;
        max-height: 90px;
    }
    .kojro-promo-item--large .kojro-promo-thumbnail-wrapper {
        width: 160px;
        padding: 0px 12px 0px 12px;
    }
    .kojro-promo-item--large .kojro-promo-thumbnail {
        max-width: 110px;
        max-height: 125px;
    }
    .kojro-promo-item--large .kojro-promo-subtitle { font-size: 1.5rem; }
    .kojro-promo-item-body { min-height: 40px; }
    .kojro-promo-item--large .kojro-promo-item-body { min-height: 50px; }
}

/* Медиа-запросы для планшетов (центр 100%, боковые 50% друг за другом) */
@media (max-width: 992px) {
    .kojro-promo-grid-wrapper {
        flex-wrap: wrap; /* Разрешаем колонкам переноситься */
        gap: 16px;
    }
    .kojro-promo-column--center {
        flex: 1 1 100%; /* Центральная колонка на всю ширину */
        min-width: unset; /* Сброс минимальной ширины */
    }
    .kojro-promo-column--left,
    .kojro-promo-column--right {
        flex: 1 1 calc(50% - 8px); /* Левая и правая по 50% с учетом gap */
        min-width: 280px; /* Задаем минимальную ширину, чтобы не сжимались слишком сильно */
    }
    
    .kojro-promo-header-area {
        min-height: 110px; /* Скорректирована мин. высота */
    }
    .kojro-promo-item--large .kojro-promo-header-area {
        min-height: 220px; /* Скорректирована мин. высота для большого блока */
    }
    .kojro-promo-header-text {
        padding: 25px 20px 14px 20px;
    }
    .kojro-promo-item--large .kojro-promo-header-text {
        padding: 30px 28px 20px 28px;
    }
    .kojro-promo-subtitle { font-size: 1.15rem; }
    .kojro-promo-item--large .kojro-promo-subtitle { font-size: 1.35rem; }
    .kojro-promo-subdesc, .kojro-promo-item--large .kojro-promo-subdesc { font-size: 0.85rem; }
    .kojro-promo-thumbnail-wrapper {
        width: 100px;
        padding: 0px 6px 0px 6px;
    }
    .kojro-promo-thumbnail {
        max-width: 70px;
        max-height: 75px;
    }
    .kojro-promo-item--large .kojro-promo-thumbnail-wrapper {
        width: 120px;
        padding: 0px 10px 0px 10px;
    }
    .kojro-promo-item--large .kojro-promo-thumbnail {
        max-width: 90px;
        max-height: 100px;
    }
    .kojro-promo-item-title { font-size: 1rem; }
    .kojro-promo-item-body { min-height: 35px; }
    .kojro-promo-item--large .kojro-promo-item-body { min-height: 45px; }
}

/* Медиа-запросы для мобильных устройств (все колонки вертикально) */
@media (max-width: 768px) {
    .kojro-promo-block {
        padding: 20px 3vw;
        max-width: 100vw;
    }
    .kojro-promo-grid-wrapper {
        flex-direction: column; /* Все главные колонки теперь вертикально */
        gap: 10px;
    }
    .kojro-promo-column,
    .kojro-promo-column--center,
    .kojro-promo-column--left,
    .kojro-promo-column--right {
        width: 100%;
        flex: 1 1 100%; /* Каждая колонка занимает всю ширину */
        min-width: 0;
    }
    .kojro-center-bottom-grid {
        flex-direction: column; /* Нижние элементы центральной колонки тоже вертикально */
        gap: 10px;
        flex-wrap: nowrap;
    }
    .kojro-center-bottom-grid > .kojro-promo-item {
        width: 100%;
        flex: 1 1 100%;
    }
    .kojro-promo-header-area,
    .kojro-promo-item--large .kojro-promo-header-area {
        flex-direction: column; /* Текст и миниатюра вертикально */
        min-height: 80px; /* Скорректирована мин. высота */
    }
    .kojro-promo-item--large .kojro-promo-header-area {
        min-height: 160px; /* Скорректирована мин. высота для большого блока */
    }
    .kojro-promo-header-text {
        padding: 18px 12px 12px 12px;
    }
    .kojro-promo-item--large .kojro-promo-header-text {
        padding: 22px 16px 16px 16px;
    }
    .kojro-promo-thumbnail-wrapper,
    .kojro-promo-item--large .kojro-promo-thumbnail-wrapper {
        width: 60px;
        min-height: 38px;
        padding: 0px 6px 0px 6px; /* Отступ снизу 0 */
        justify-content: center;
        align-items: flex-end;
    }
    .kojro-promo-thumbnail,
    .kojro-promo-item--large .kojro-promo-thumbnail {
        max-width: 38px;
        max-height: 42px;
    }
    .kojro-promo-subtitle,
    .kojro-promo-item--large .kojro-promo-subtitle {
        font-size: 1.0rem;
    }
    .kojro-promo-subdesc,
    .kojro-promo-item--large .kojro-promo-subdesc {
        font-size: 0.85rem;
    }
    .kojro-promo-item-body {
        padding: 10px 8px;
        min-height: 30px;
    }
    .kojro-promo-item--large .kojro-promo-item-body {
        min-height: 40px;
    }
    .kojro-promo-item-title {
        font-size: .95rem;
    }
}

/* Медиа-запросы для очень маленьких экранов (маленькие смартфоны) */
@media (max-width: 480px) {
    .kojro-promo-header-text {
        padding: 14px 8px 10px 8px;
    }
    .kojro-promo-item--large .kojro-promo-header-text {
        padding: 16px 10px 12px 10px;
    }
    .kojro-promo-thumbnail-wrapper {
        width: 35px;
        min-height: 22px;
        padding: 0px 3px 0px 3px; /* Отступ снизу 0 */
    }
    .kojro-promo-thumbnail {
        max-width: 22px;
        max-height: 26px;
    }
    .kojro-promo-subtitle,
    .kojro-promo-item--large .kojro-promo-subtitle {
        font-size: .9rem;
    }
    .kojro-promo-subdesc,
    .kojro-promo-item--large .kojro-promo-subdesc {
        font-size: .78rem;
    }
    .kojro-promo-item-title {
        font-size: .8rem;
    }
    .kojro-promo-item-body { min-height: 25px; }
    .kojro-promo-item--large .kojro-promo-item-body { min-height: 35px; }
}

/* === END OF KOJRO PROMO BLOCK CODE === */

/* kojro-author-code: Kojro_SEO_Pricing_v2.0 */

/* Global Reset & Font Import */
* {
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- General Styling --- */
.kojro-pricing-section {
    font-family: 'Inter', sans-serif;
    padding: 80px 20px;
    background-color: #f8f8fc; /* Светлый фон для контраста */
    color: #333;
    overflow: hidden;
    position: relative;
}

/* Эффект мерцающего/вращающегося фона секции */
.kojro-pricing-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background: radial-gradient(circle at 10% 20%, rgba(255, 105, 180, 0.05) 0%, rgba(114, 84, 224, 0.05) 50%, transparent 100%); /* Обновленный цвет фиолетового */
    z-index: 0;
    pointer-events: none;
    animation: kojro-rotate-bg 30s linear infinite;
    opacity: 0.7;
}

@keyframes kojro-rotate-bg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.kojro-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.kojro-section-title {
    font-size: 2.8em;
    margin-bottom: 20px;
    color: #2c3e50;
    position: relative;
    display: inline-block;
}

/* Подчеркивание заголовка градиентом */
.kojro-section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #7254e0, #ff69b4); /* Обновленный цвет фиолетового */
    border-radius: 2px;
}

.kojro-section-subtitle {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Pricing Cards Container --- */
.kojro-pricing-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* --- Individual Pricing Card --- */
.kojro-pricing-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 350px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kojro-pricing-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.kojro-pricing-card.kojro-popular {
    box-shadow: 0 15px 40px rgba(114, 84, 224, 0.2); /* Обновленный цвет фиолетового */
    border: 2px solid #7254e0; /* Обновленный цвет фиолетового */
}

.kojro-pricing-card.kojro-popular:hover {
    transform: translateY(-20px) scale(1.03);
    box-shadow: 0 25px 60px rgba(114, 84, 224, 0.3); /* Обновленный цвет фиолетового */
}

/* Бейдж "Рекомендуем" */
.kojro-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff69b4; /* Розовый цвет */
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}

/* --- Card Header --- */
.kojro-card-header {
    background: linear-gradient(45deg, #7254e0, #d89cf6, #ff69b4); /* Обновленный цвет фиолетового */
    color: #fff;
    padding: 30px 25px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    position: relative;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 140px;
    z-index: 2;
}

/* Эффект матового стекла (frosted glass) для шапки */
.kojro-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.kojro-plan-name {
    font-size: 2.2em;
    margin-bottom: 10px;
    font-weight: 700;
}

.kojro-plan-tagline {
    font-size: 1em;
    opacity: 0.9;
    font-style: italic;
    margin-top: 5px;
}

/* --- Card Body --- */
.kojro-card-body {
    padding: 30px 25px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kojro-price-block {
    margin-bottom: 25px;
    font-size: 2.5em;
    font-weight: 700;
    color: #7254e0; /* Обновленный цвет фиолетового */
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.kojro-price-currency {
    font-size: 0.6em;
    vertical-align: super;
    font-weight: normal;
}

.kojro-price-value {
    font-size: 1em;
    line-height: 1;
}

.kojro-price-period {
    font-size: 0.4em;
    color: #777;
    font-weight: normal;
}

.kojro-features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
}

.kojro-features-list li {
    margin-bottom: 15px;
    font-size: 1.05em;
    color: #444;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding-left: 25px; /* Отступ для кастомной галочки */
}

/* Кастомная галочка для списка */
.kojro-features-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px; /* Регулировка вертикального положения */
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(45deg, #7254e0, #ff69b4); /* Обновленный цвет фиолетового */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: #fff;
    line-height: 1;
    content: '✓'; /* Галочка */
}

/* --- Call to Action Button --- */
.kojro-btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.kojro-gradient-btn {
    background: linear-gradient(90deg, #7254e0, #d89cf6, #ff69b4); /* Обновленный цвет фиолетового */
    background-size: 200% 200%;
    animation: kojro-gradient-shift 5s ease infinite;
}

.kojro-gradient-btn:hover {
    box-shadow: 0 12px 30px rgba(114, 84, 224, 0.4); /* Обновленный цвет фиолетового */
    transform: translateY(-3px);
    background-position: right center;
}

@keyframes kojro-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .kojro-pricing-cards {
        flex-direction: column;
        align-items: center;
    }
    .kojro-pricing-card {
        width: 80%;
    }
}

@media (max-width: 768px) {
    .kojro-pricing-section {
        padding: 60px 15px;
    }
    .kojro-section-title {
        font-size: 2.2em;
    }
    .kojro-section-subtitle {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .kojro-pricing-card {
        width: 100%;
    }
    .kojro-plan-name {
        font-size: 1.8em;
    }
    .kojro-price-block {
        font-size: 2em;
    }
    .kojro-btn {
        padding: 12px 25px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .kojro-section-title {
        font-size: 1.8em;
    }
    .kojro-section-subtitle {
        font-size: 0.9em;
    }
    .kojro-plan-name {
        font-size: 1.5em;
    }
    .kojro-price-block {
        font-size: 1.8em;
    }
    .kojro-features-list li {
        font-size: 0.95em;
    }
}

/* -------------------------------------------------------------------------- */
/*                                  Начало CSS                                 */
/* -------------------------------------------------------------------------- */
.kojro-footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 40px 20px 20px;
    border-top: 5px solid #3498db;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.25);
    margin-top: auto;
    text-align: left;
}

.kojro-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

.kojro-footer-column {
    flex: 1;
    min-width: 200px;
    padding: 10px;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.kojro-footer-column h3 {
    color: #3498db;
    font-size: 1.2em;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    font-weight: 600;
}

.kojro-footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 1px;
    background: linear-gradient(to right, #9b59b6, #8e44ad);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.kojro-footer-column p {
    font-size: 0.95em;
    margin-bottom: 15px;
    color: #bdc3c7;
    text-align: left;
}

.kojro-footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.kojro-footer-column ul li {
    margin-bottom: 10px;
}

.kojro-footer-column ul li a,
.kojro-footer-column p a {
    color: #ecf0f1;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.kojro-footer-column ul li a:hover,
.kojro-footer-column p a:hover {
    color: #3498db;
    transform: translateX(5px);
}

.kojro-social-icons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    justify-content: flex-start;
    align-items: flex-start;
}

.kojro-social-icons a {
    color: #ecf0f1;
    font-size: 1.2em;
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.kojro-social-icons a:hover {
    color: #9b59b6;
    transform: translateY(-5px) scale(1.1);
}

.kojro-footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85em;
    color: #bdc3c7;
}

.kojro-footer-bottom a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s ease;
}

.kojro-footer-bottom a:hover {
    color: #9b59b6;
}

@media (max-width: 768px) {
    .kojro-footer-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .kojro-footer-column {
        min-width: 90%;
    }

    .kojro-footer-column h3::after {
        left: 0;
        transform: none;
    }

    .kojro-social-icons {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .kojro-footer {
        padding: 30px 15px 15px;
    }

    .kojro-footer-column h3 {
        font-size: 1.1em;
    }

    .kojro-footer-column p,
    .kojro-footer-column ul {
        font-size: 0.9em;
    }

    .kojro-footer-bottom {
        font-size: 0.8em;
        margin-top: 30px;
    }
}

/* -------------------------------------------------------------------------- */
/*                                  Конец CSS                                 */
/* -------------------------------------------------------------------------- */

 
/* CSS-переменные для легкой настройки */
:root {
    --kojro-primary-color: #3498db;
    --kojro-hover-color: #2980b9;
    --kojro-text-dark: #2c3e50;
    --kojro-text-medium: #555;
    --kojro-text-light: #fff;
    --kojro-wrapper-bg: #f8f8f8;
    --kojro-wrapper-border-radius: 0px;
    --kojro-shadow-strong: 0 15px 30px rgba(0, 0, 0, 0.4),
                         0 -5px 10px rgba(0, 0, 0, 0.08),
                         0 0 15px rgba(0, 0, 0, 0.1);
    --kojro-shadow-medium: 0 10px 25px rgba(0, 0, 0, 0.15);
    --kojro-transition-fast: 0.3s ease;
    --kojro-transition-slow: 0.3s ease-in-out;
    --kojro-nav-btn-size: 65px;
    --kojro-nav-btn-font-size: 3.5em;
    --kojro-slide-padding: 60px;
    --kojro-button-base-shadow-main: 0 8px 15px rgba(0, 0, 0, 0.3);
    --kojro-button-hover-shadow-main: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Общие стили для контейнера слайдера */
.kojro-slider-wrapper {
    position: relative;
    width: 100%; /* Уже было 100%, это хорошо */
    /* ИЗМЕНЕНИЕ 2: Убираем max-width, чтобы слайдер растягивался на всю ширину */
    max-width: none; /* Убираем ограничение ширины */
    overflow: hidden;
    border-radius: var(--kojro-wrapper-border-radius); /* Использует новую переменную */
    box-shadow: var(--kojro-shadow-strong);
    background-color: var(--kojro-wrapper-bg);
    min-height: 550px;
    height: auto;
}

/* Контейнер для всех слайдов. Не управляет расположением, только общая обертка */
.kojro-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

/* Стили для отдельного слайда */
.kojro-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ИЗМЕНЕНИЕ 3: Переносим padding внутрь `inner-slide-content` для контроля ширины контента */
    padding: 0; /* Убираем padding здесь */
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--kojro-transition-slow), visibility var(--kojro-transition-slow);
    z-index: 1;
    background-size: cover;
    background-position: center;
    color: var(--kojro-text-light); /* Цвет текста на градиентном фоне */
}

.kojro-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* --- Стили для градиентов (с уменьшенной яркостью) --- */
.kojro-slide--gradient-1 {
    background-image: linear-gradient(to right top, #7d8ee3, #e57288); /* Приглушенный розово-фиолетовый */
}
.kojro-slide--gradient-2 {
    background-image: linear-gradient(to right top, #5bc3e7, #4b92d6); /* Приглушенный голубой */
}
.kojro-slide--gradient-3 {
    background-image: linear-gradient(to right top, #e4c45a, #e5995e); /* Приглушенный желто-оранжевый */
}
.kojro-slide--gradient-4 {
    background-image: linear-gradient(to right top, #a67bb1, #7b58a1); /* Новый приглушенный фиолетовый */
}
/* Добавьте больше градиентов по аналогии */

.kojro-slide-inner-content {
    width: 100%;
    max-width: 1690px; /* Максимальная ширина для контента слайда, соответствует промо-блоку */
    margin: 0 auto; /* Центрируем контент */
    padding: var(--kojro-slide-padding); /* Применяем padding здесь, чтобы контент не прилипал к краям */
    box-sizing: border-box;
    display: flex; /* Сохраняем flex-поведение для .kojro-slide-content и .kojro-slide-image */
    align-items: center;
    justify-content: center; /* Центрирование flex-элементов внутри */
    height: 100%; /* Занимаем всю высоту родителя, чтобы align-items работал корректно */
}

/* Стили для левой секции (контент: заголовок, описание, кнопка) */
.kojro-slide-content {
    flex: 1;
    padding-right: 40px;
    text-align: left;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.kojro-slide-title {
    font-size: 3.2em;
    margin-bottom: 20px;
    color: var(--kojro-text-light);
    line-height: 1.2;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.kojro-slide-description {
    font-size: 1.3em;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-family: 'Open Sans', sans-serif;
}

/* Стили для кнопки "Заказать" */
.kojro-slide-button {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--kojro-text-light);
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    transition: var(--kojro-transition-fast);
    outline: none;
    position: relative;
    z-index: 1; /* Кнопка выше волны */
    animation: kojroWave 2s linear infinite;
}

/* Ключевые кадры для анимации волны */
@keyframes kojroWave {
    0% {
        box-shadow: var(--kojro-button-base-shadow-main),
                    0 0 0 0 rgba(255, 255, 255, 0.2), /* Начало первой волны */
                    0 0 0 0 rgba(255, 255, 255, 0.1); /* Начало второй волны */
    }
    40% {
        box-shadow: var(--kojro-button-base-shadow-main),
                    0 0 0 12px rgba(255, 255, 255, 0.2), /* Первая волна расширяется */
                    0 0 0 0 rgba(255, 255, 255, 0.1);
    }
    80% {
        box-shadow: var(--kojro-button-base-shadow-main),
                    0 0 0 24px rgba(255, 255, 255, 0), /* Первая волна исчезает */
                    0 0 0 18px rgba(255, 255, 255, 0.1); /* Вторая волна расширяется */
    }
    100% {
        box-shadow: var(--kojro-button-base-shadow-main),
                    0 0 0 28px rgba(255, 255, 255, 0),
                    0 0 0 30px rgba(255, 255, 255, 0); /* Обе волны исчезли */
    }
}

.kojro-slide-button:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--kojro-text-light);
    transform: translateY(-3px);
    box-shadow: var(--kojro-button-hover-shadow-main);
    animation-play-state: paused;
}

/* Стили для фокуса кнопки для доступности */
.kojro-slide-button:focus-visible {
    outline: 2px solid var(--kojro-text-light);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3);
    animation-play-state: paused; /* Пауза анимации при фокусе для лучшей читаемости */
}

/* Стили для правой секции (изображение) */
.kojro-slide-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50%;
}

.kojro-slide-image img {
    max-width: 100%;
    height: auto;
    max-height: 450px;
    border-radius: 10px;
    box-shadow: var(--kojro-shadow-medium);
    display: block;
    object-fit: cover;
}

/* Стили для кнопок навигации (prev/next) */
.kojro-slider-nav-btn {
    position: absolute;
    top: 50%;
    /* ИЗМЕНЕНИЯ ЗДЕСЬ: подъем стрелок на 3px */
    transform: translateY(calc(-50% - 3px));

    opacity: 0;
    visibility: hidden;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--kojro-text-light);
    transition: opacity var(--kojro-transition-fast), visibility var(--kojro-transition-fast), background-color var(--kojro-transition-fast), border-color var(--kojro-transition-fast);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    font-size: var(--kojro-nav-btn-font-size);
    font-weight: 200;
    width: var(--kojro-nav-btn-size);
    height: var(--kojro-nav-btn-size);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    outline: none;
}

/* Кнопки появляются при наведении на весь слайдер */
.kojro-slider-wrapper:hover .kojro-slider-nav-btn {
    opacity: 1;
    visibility: visible;
}

/* Стили для фокуса навигационных кнопок для доступности */
.kojro-slider-nav-btn:focus-visible {
    outline: 2px solid var(--kojro-text-light);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3);
}

.kojro-slider-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--kojro-text-light);
}

.kojro-slider-prev {
    left: 20px;
}

.kojro-slider-next {
    right: 20px;
}

/* Стили для пагинации (точки) */
.kojro-slider-pagination {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.kojro-pagination-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--kojro-transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    outline: none;
}

/* Стили для фокуса точек пагинации для доступности */
.kojro-pagination-dot:focus-visible {
    outline: 2px solid var(--kojro-text-light);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3);
}

.kojro-pagination-dot.active {
    background-color: var(--kojro-text-light);
    border-color: var(--kojro-text-light);
    transform: scale(1.2);
}

.kojro-pagination-dot:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Адаптивность: медиа-запросы для небольших экранов */
@media (max-width: 992px) {
    .kojro-slide-inner-content {
        padding: 30px;
    }

    .kojro-slide-title {
        font-size: 2.5em;
    }

    .kojro-slide-description {
        font-size: 1.1em;
    }

    .kojro-slide-button {
        padding: 12px 25px;
        font-size: 1em;
    }

    .kojro-slider-nav-btn {
        width: 55px;
        height: 55px;
        font-size: 2.8em;
    }

    .kojro-slider-prev {
        left: 10px;
    }

    .kojro-slider-next {
        right: 10px;
    }
}

@media (max-width: 768px) {
    /* ИЗМЕНЕНИЕ 6: Изменения для мобильного вида */
    .kojro-slide-inner-content {
        flex-direction: column; /* Контент вертикально */
        text-align: center;
        padding: 25px 20px; /* Устанавливаем padding здесь */
    }

    .kojro-slide-content {
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
        align-items: center;
    }

    .kojro-slide-image {
        max-width: 90%;
        order: -1;
        margin-bottom: 20px;
    }

    .kojro-slide-image img {
        max-height: 300px;
    }

    .kojro-slide-title {
        font-size: 2em;
        margin-bottom: 15px;
    }

    .kojro-slide-description {
        font-size: 1em;
        margin-bottom: 25px;
    }

    .kojro-slide-button {
        background-color: rgba(0, 0, 0, 0.35);
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--kojro-text-light);
        /* На мобильных анимация волны может быть менее заметна или отключена, если мешает */
        /* animation-play-state: running; */
    }
    .kojro-slide-button:hover {
        background-color: rgba(0, 0, 0, 0.5);
        color: var(--kojro-text-light);
    }

    .kojro-slider-nav-btn {
        opacity: 1;
        visibility: visible;
        width: 45px;
        height: 45px;
        font-size: 2.2em;
        top: auto;
        bottom: 20px;
        transform: none; /* Сбрасываем calc, так как на мобильных кнопки часто привязаны к низу, а не к центру */
        background-color: rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.2);
    }
    .kojro-slider-wrapper:hover .kojro-slider-nav-btn {
        opacity: 1;
        visibility: visible;
    }

    .kojro-slider-prev {
        left: 20px;
    }
    .kojro-slider-next {
        right: 20px;
    }

    .kojro-slider-pagination {
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .kojro-slide-title {
        font-size: 1.8em;
    }
    .kojro-slide-description {
        font-size: 0.9em;
    }
    .kojro-slide-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .kojro-slide-image {
        max-width: 100%;
    }
}
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}
        /* Kojro Pure CSS FAQ Styles - START */
        /*Обновленные стили FAQ на чистом CSS (желтый фон, черный текст, крупнее шрифт) */
        :root {
            --page-bg-color: #f0f2f5; /* Очень светлый серо-синий для фона страницы */
            --card-bg-color: #ffffff; /* Белый для отдельных элементов FAQ */
            --question-bg-yellow: #FFD700; /* Золотисто-желтый для фона вопроса */
            --question-bg-yellow-hover: #FFC000; /* Чуть темнее желтый для наведения */
            --question-text-black: #000000; /* Черный текст вопроса */
            --answer-bg-color: #f9f9f9; /* Слегка не совсем белый для фона ответа */
            --border-color: #e0e0e0; /* Светлая граница */
            --shadow-color: rgba(0, 0, 0, 0.08); /* Мягкая тень */
            --hover-shadow-color: rgba(0, 0, 0, 0.15); /* Чуть более сильная тень при наведении */
            --transition-speed: 0.3s; /* Скорость перехода для анимаций */
            --border-radius: 12px; /* Радиус скругления углов */
        }

        body {
            background-color: var(--page-bg-color);
            margin: 0;
            padding: 0;
        }

        .kojro-faq {
            max-width: 800px;
            margin: 40px auto;
            font-family: sans-serif; /* Использование общего системного шрифта */
            padding: 20px;
            background-color: var(--page-bg-color);
        }

        .kojro-faq-title {
            text-align: center;
            margin-bottom: 40px;
            /* Остальные стили для заголовка будут наследоваться с сайта */
        }

        .kojro-faq-item {
            margin-bottom: 20px;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 5px 20px var(--shadow-color);
            transition: all var(--transition-speed) ease;
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-color);
        }

        .kojro-faq-item:hover {
            box-shadow: 0 8px 30px var(--hover-shadow-color);
            transform: translateY(-3px);
        }

        .kojro-faq-input {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }

        .kojro-faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--question-bg-yellow); /* Желтый фон */
            color: var(--question-text-black); /* Черный текст */
            padding: 20px 25px;
            cursor: pointer;
            font-weight: 400; /* Жирный шрифт для "популярного черного" */
            font-size: 1.2rem; /* Увеличенный размер шрифта для десктопа */
            transition: all var(--transition-speed) ease;
            position: relative;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Тонкая темная внутренняя граница */
        }

        .kojro-faq-question:hover {
            background: var(--question-bg-yellow-hover); /* Чуть темнее желтый при наведении */
        }

        .kojro-faq-question::after {
            content: '';
            width: 10px;
            height: 10px;
            border-right: 2px solid var(--question-text-black); /* Черная иконка */
            border-bottom: 2px solid var(--question-text-black); /* Черная иконка */
            transform: rotate(45deg);
            transition: transform var(--transition-speed) ease;
            margin-left: 15px;
            flex-shrink: 0;
        }

        .kojro-faq-input:checked + .kojro-faq-question::after {
            transform: rotate(-135deg);
        }

        .kojro-faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
            background-color: var(--answer-bg-color);
            border-top: 1px solid var(--border-color);
        }

        .kojro-faq-input:checked ~ .kojro-faq-answer {
            max-height: 500px;
            padding: 20px 25px;
        }

        .kojro-faq-answer-content {
            /* Стили для содержимого ответа будут наследоваться с сайта */
        }

        /* 📱 Медиазапросы для адаптивности */
        @media (max-width: 768px) {
            .kojro-faq {
                margin: 20px auto;
                padding: 15px;
            }
            .kojro-faq-title {
                margin-bottom: 30px;
            }
            .kojro-faq-question {
                font-size: 1.2rem;
                padding: 18px 20px;
            }
            .kojro-faq-input:checked ~ .kojro-faq-answer {
                padding: 18px 20px;
            }
        }

        @media (max-width: 480px) {
            .kojro-faq {
                padding: 10px;
            }
            .kojro-faq-title {
                margin-bottom: 25px;
            }
            .kojro-faq-question {
                font-size: 1.1rem;
                padding: 15px 15px;
            }
            .kojro-faq-question::after {
                width: 8px;
                height: 8px;
                margin-left: 10px;
            }
            .kojro-faq-input:checked ~ .kojro-faq-answer {
                padding: 15px 15px;
            }
        }
        /* Kojro Pure CSS FAQ Styles - END */

.kojro-table-container {
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
  padding: 0 10px;
}
.kojro-custom-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border: 0.5px solid #ddd;
}
.kojro-custom-table th,
.kojro-custom-table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
  vertical-align: middle;
  word-wrap: break-word;
}
.kojro-custom-table th {
  background-color: #4CAF50;
  color: #fff;
  font-weight: bold;
}
.kojro-custom-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
.kojro-custom-table tr:hover {
  background-color: #ddd;
  transition: background-color 0.2s ease;
}
.kojro-custom-table .handwriting {
  font-family: 
    'Segoe Script', 
    'Brush Script MT', 
    'Apple Chancery',
    'Bradley Hand', 
    'Snell Roundhand', 
    'URW Chancery L',
    'Lucida Calligraphy', 
    'Lucida Handwriting', 
    'Comic Sans MS',
    'Marker Felt', 
    cursive !important;
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: #333;
  text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.1);
}

@media (max-width: 600px) {
  .kojro-custom-table th,
  .kojro-custom-table td {
    padding: 8px;
    font-size: 14px;
  }
  .kojro-custom-table .handwriting {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .kojro-footer-div {
    color: #f0f0f0;
    font-size: 16px;
    line-height: 1.5;
    padding: 12px;
    text-align: center;
  }
}
/* End */
/* /local/templates/KOJRO - HOME/styles.css?177206143351991 */
/* /local/templates/KOJRO - HOME/template_styles.css?177249104374801 */